<script>
import outMain from "@/components/outMain.vue";
import upMoreImg from "@/components/public/upMoreImg.vue";

import { ElMessage, ElMessageBox } from "element-plus";
import {
  Cooperate_enterpriseAdd,
  Cooperate_enterpriseEdit,
  Cooperate_enterpriseShow,
} from "@/http/api";

export default {
  components: { outMain, upMoreImg },
  name: "",
  data() {
    const checkPhone = (rule, value, callback) => {
      let result = this.$ruleCheck.checkPhone(value);
      if (!result) {
        callback();
      } else {
        callback(new Error(result));
      }
    };
    const checkBootList = (rule, value, callback) => {
      if (value.length > 0) {
        let result = true;
        for (let item of value) {
          for (let objItem in item) {
            let mustArr = [
              "watercraft_name",
              "watercraft_type",
              "watercraft_area",
              "watercraft_num",
            ];
            if (mustArr.includes(objItem)) {
              if (item[objItem] == "") {
                result = false;
                break;
              }
            }
          }
        }
        result ? callback() : callback(new Error("请完善船舶每一项内容"));
      } else {
        callback(new Error("请添加此船队下关联的船舶"));
      }
    };
    const checkCity = (rule, value, callback) => {
      console.log(value);
      if (value.length == 2) {
        callback();
      } else {
        callback(new Error("请选择登陆城市"));
      }
    };
    return {
      detailId: this.$route.query.id,
      citys: [],
      showImg: false,
      formData: {
        c_enterprise_name: "",
        c_enterprise_person: "",
        c_enterprise_mobile: "",
        c_enterprise_city: "",
        c_watercraft: [
          {
            watercraft_name: "",
            watercraft_colors: "",
            watercraft_hh: "",
            watercraft_imo: "",
            watercraft_type: "",
            watercraft_area: "",
            watercraft_zcsj: "",
            watercraft_num: "",
            watercraft_dw: "吨",
          },
        ],
        c_enterprise_remark: "",
        c_enterprise_file: "",
      },
      rules: {
        c_enterprise_name: [
          {
            required: true,
            message: "请输入合作企业名称",
            trigger: "blur",
            min: 0,
            max: 20,
          },
        ],
        c_enterprise_person: [
          {
            required: true,
            message: "请输入合作企业负责人",
            trigger: "blur",
            min: 0,
            max: 10,
          },
        ],
        c_enterprise_mobile: [
          {
            validator: checkPhone,
            required: true,
            trigger: "blur",
          },
        ],
        c_watercraft: [
          {
            validator: checkBootList,
            required: true,
            trigger: "blur",
          },
        ],
        c_enterprise_city: [
          {
            required: true,
            validator: checkCity,
            trigger: "change",
          },
        ],
      },
      bootType: [],
      bootLineType: [],
    };
  },
  props: {},
  setup() {},
  methods: {
    addBootList() {
      this.formData.c_watercraft.push({
        watercraft_name: "",
        watercraft_colors: "",
        watercraft_hh: "",
        watercraft_imo: "",
        watercraft_type: "",
        watercraft_area: "",
        watercraft_zcsj: "",
        watercraft_num: "",
        watercraft_dw: "吨",
      });
    },
    delBootFn(index) {
      this.formData.c_watercraft.splice(index, 1);
    },
    backFn() {
      this.$router.back();
    },
    getImg(url) {
      this.formData.c_enterprise_file = url;
    },
    getYearTime(time) {
      const y = time.getFullYear();
      const str = `${y}`;
      return str;
    },
    async saveFn() {
      const valid = await this.$refs.ruleForm.validate();
      if (!valid) {
        return;
      }
      let queryData = { ...this.formData };
      queryData.c_watercraft = queryData.c_watercraft.map((item) => {
        if (typeof item.watercraft_zcsj == "object") {
          item.watercraft_zcsj = this.getYearTime(item.watercraft_zcsj);
        }
        return item;
      });
      queryData.c_enterprise_city = queryData.c_enterprise_city.join("-");
      const { data } = this.detailId
        ? await Cooperate_enterpriseEdit(queryData)
        : await Cooperate_enterpriseAdd(queryData);
      if (data.code == 1) {
        ElMessage({
          type: "success",
          message: this.detailId ? "编辑成功" : "新增成功",
        });
        setTimeout(() => {
          this.$router.back();
        }, 1000);
      }
    },

    getData() {
      Cooperate_enterpriseShow({ c_enterprise_id: this.detailId }).then(
        (res) => {
          if (res.data.code == 1) {
            this.formData = res.data.data;
            this.formData["c_enterprise_id"] = this.detailId;
            this.formData.c_enterprise_city =
              res.data.data.c_enterprise_city.split("-");
            this.showImg = true;
          }
        }
      );
    },
  },
  mounted() {},
  async created() {
    this.citys = this.$city.getCity();
    this.bootType = await this.$getCate.getCateFn(1);
    this.bootLineType = await this.$getCate.getCateFn(2);
    if (this.detailId) {
      this.getData();
    } else {
      this.showImg = true;
    }
  },
};
</script>
<template>
  <outMain>
    <div class="formCont">
      <div class="formHead">
        <div>{{ detailId ? "编辑" : "新增" }}合作企业</div>
        <btn value="返回上一级" @ok="backFn"></btn>
      </div>
      <div class="formMain">
        <el-form :rules="rules" :model="formData" ref="ruleForm">
          <div class="flexCont">
            <el-form-item
              label="企业名称"
              label-width="120"
              prop="c_enterprise_name"
            >
              <el-input
                clearable
                placeholder="请输入企业名称"
                v-model="formData.c_enterprise_name"
              />
            </el-form-item>
            <el-form-item
              label="负责人"
              label-width="120"
              prop="c_enterprise_person"
            >
              <el-input
                clearable
                placeholder="请输入负责人"
                v-model="formData.c_enterprise_person"
              />
            </el-form-item>
            <el-form-item
              label="手机号"
              label-width="120"
              prop="c_enterprise_mobile"
            >
              <el-input
                clearable
                maxlength="11"
                placeholder="请输入手机号"
                v-model="formData.c_enterprise_mobile"
              />
            </el-form-item>
            <el-form-item
              label="所属城市"
              label-width="120"
              prop="c_enterprise_city"
            >
              <el-cascader
                style="width: 100%"
                placeholder="请选择城市"
                v-model="formData.c_enterprise_city"
                :options="citys"
              />
            </el-form-item>
            <el-form-item
              class="flexPull"
              label="船东备注"
              label-width="120"
              prop="userName"
            >
              <el-input
                v-model="formData.c_enterprise_remark"
                maxlength="3000"
                placeholder="请输入备注"
                show-word-limit
                :rows="4"
                type="textarea"
              />
            </el-form-item>
            <el-form-item
              label="关联船舶"
              class="flexPull"
              label-width="120"
              prop="c_watercraft"
            >
              <div class="addBootItem">
                <btn value="新增船舶" @click="addBootList"></btn>
              </div>
              <div class="customCont">
                <div
                  class="customItem flexPull"
                  :key="index"
                  v-for="(item, index) in formData.c_watercraft"
                >
                  <div class="customTd">
                    <el-input
                      placeholder="船舶名称(必填)"
                      v-model="item.watercraft_name"
                    />
                  </div>
                  <div class="customTd">
                    <el-select
                      v-model="item.watercraft_type"
                      placeholder="类型(必选)"
                    >
                      <el-option
                        v-for="item in bootType"
                        :key="item.name"
                        :label="item.name"
                        :value="item.name"
                      />
                    </el-select>
                  </div>
                  <div class="customTd">
                    <el-select
                      v-model="item.watercraft_area"
                      placeholder="航区(必选)"
                    >
                      <el-option
                        v-for="item in bootLineType"
                        :key="item.name"
                        :label="item.name"
                        :value="item.name"
                      />
                    </el-select>
                  </div>
                  <div class="customTd">
                    <el-input
                      placeholder="船旗"
                      v-model="item.watercraft_colors"
                    />
                  </div>
                  <div class="customTd">
                    <el-input placeholder="呼号" v-model="item.watercraft_hh" />
                  </div>
                  <div class="customTd">
                    <el-input
                      placeholder="imo号"
                      v-model="item.watercraft_imo"
                    />
                  </div>
                  <div class="customTd">
                    <el-date-picker
                      v-model="item.watercraft_zcsj"
                      type="year"
                      style="width: 100%"
                      placeholder="造船时间"
                    />
                  </div>
                  <div class="customTd maxWidth">
                    <el-input
                      placeholder="载货量(必填)"
                      v-model="item.watercraft_num"
                    >
                      <template #append>
                        <el-select
                          v-model="item.watercraft_dw"
                          placeholder="单位"
                          style="width: 70px"
                        >
                          <el-option label="吨" value="吨" />
                          <el-option label="箱标" value="箱标" />
                          <el-option label="立方" value="立方" />
                        </el-select>
                      </template>
                    </el-input>
                  </div>
                  <btnPlain value="删除此船" @ok="delBootFn(index)"></btnPlain>
                </div>
              </div>
            </el-form-item>

            <el-form-item
              class="flexPull"
              label="船东附件"
              label-width="120"
              v-if="showImg"
              prop="userName"
            >
              <upMoreImg
                :propImgs="formData.c_enterprise_file"
                @ok="getImg"
              ></upMoreImg>
            </el-form-item>
          </div>
          <el-form-item class="flexPull" label=" " label-width="120">
            <btn :value="detailId ? '确认编辑' : '确认新增'" @ok="saveFn"></btn>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </outMain>
</template>
<style scoped lang="less"></style>
